<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/aboveTool.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/signon.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<body>
<div th:replace="common/IncludeTop::header"></div>
<div id="Content">
    <div>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#Catalog").hide().fadeIn();
            });
        </script>
    </div>
    <div id="Catalog">
        <form action="/account/signon" method="post">
            <p class="pcss">Please enter your username and password.</p>
            <div class="login">
                <div class="container-login100">
                    <div class="wrap-login100">
                        <form class="login100-form validate-form" >
				<span class="login100-form-title">
					Login
				</span>

                            <div class="wrap-input100 validate-input">
                                <input class="input100" type="text" name="username" placeholder="Account" >
                                <span class="focus-input100"></span>
                                <span class="symbol-input100">
						<i class="fa fa-envelope" aria-hidden="true"></i>
                        <span id="usernameTips"></span>
					</span>
                            </div>

                            <div class="wrap-input100 validate-input">
                                <input class="input100" type="password" name="password" placeholder="Password" >
                                <span class="focus-input100"></span>
                                <span class="symbol-input100">
						<i class="fa fa-lock" aria-hidden="true"></i>
					</span>
                            </div>

<!--                            <div class="vcodediv">-->
<!--                                <span>VerificationCode:</span>-->
<!--                                <input type="text" name="code" size="5" maxlength="5" class="vcode"/>-->
<!--                                <a href="http://localhost:8080/jpetstore_maven_war/Kaptcha.jpg"><img src="http://localhost:8080/jpetstore_maven_war/Kaptcha.jpg" style="vertical-align: middle; height: 20px ;"></a>-->
<!--                            </div>-->

                            <div class="container-login100-form-btn">
                                <button class="login100-form-btn">
                                    Go
                                </button>
                            </div>
                            <font color="red" class="msg"><br th:text="${msg}"></br></font>
                        </form>
                    </div>
                </div>
            </div>
        </form>
        Need a user name and password?
        <a class="acss" href="newAccountForm">Register Now!</a>
    </div>
</div>
<div th:replace="common/IncludeBottom::footer"></div>
</body>
</html>